<template>
    <div class="login" v-loading="loading" 
        element-loading-background="rgba(0, 0, 0, 0.5)" 
        element-loading-text="请稍等...">       
        <div class="container">
            <h1>{{ButName=="员工"?"客户":"员工"}}登录</h1>
            <el-form :model="logindata" label-width="50px">
                <el-form-item label="账号" class="item">
                    <el-input v-model="logindata.username" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" class="item">
                    <el-input v-model="logindata.password" placeholder="请输入密码" type="password" show-password />
                </el-form-item>
                <el-form-item class="item">
                    <el-button type="primary" @click="switchLogin()">{{ButName}}</el-button>
                    <el-button type="primary" @click="submitForm()">登陆</el-button>
                    <el-button type="primary" @click="register()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import { ElMessage,ElNotification  } from 'element-plus'
export default defineComponent({
    data () {
        return {
            loading:false,
            BaseUrlRoot:'login',
            switchIndex:0,
            ButName:'员工',
            logindata:{
                username:'',
                password:''
            }
        }
    },
    setup() {
        // 配置路由
        const router = useRouter();
        // 配置vuex
        const store = useStore();
        // 配置代理
        const proxy = getCurrentInstance();

        return{
            router,
            store,
            proxy
        }
    },
    methods: {
        switchLogin(){
            this.switchIndex = this.switchIndex == 0 ? 1 : 0;
            if(this.switchIndex==0){
                this.BaseUrlRoot = "login";
                this.ButName = "员工";
            }else{
                this.BaseUrlRoot = "empinfo";
                this.ButName = "客户";
            }
        },
        submitForm(){
            this.loading = true;
            let self = this;
            let row = {
                username : self.logindata.username,
                password : this.logindata.password
            }
            self.$http.get(`${self.baseUrl}/${self.BaseUrlRoot}/CheckPass?name=${self.logindata.username}&pass=${this.logindata.password}`,row).then(res=>{
                console.log(res)
                if(res.data.user){
                    self.RemindMsg(res.data.user)
                    self.store.dispatch('asyncStoreUser', res.data.user);
                    self.store.dispatch("asyncSetToken",res.data.token);
                    self.router.push({
                        path:'/Home'
                    })
                }else{
                    ElMessage({
                        message:"密码或账号错误",
                        type:'error'
                    })
                }
                self.loading = false;
            }).catch(e=>{
                console.log(e)
                ElMessage({
                    message:e.message,
                    type:'error'
                })
                self.loading = false;
            })
        },
        RemindMsg(obj){
            let d = new Date();
            let str = ["凌晨","上午","下午","晚上"];
            let h = d.getHours();
            ElNotification({
                title: `${obj.name},${str[Math.floor(h / 6)]}好`,
                message: '欢迎光临贝妙屋宠物医院,您的到来是我们最大的荣幸！！！',
                type: 'success',
            })
        },
        register(){
            this.router.push({
                path:'/register'
            })
        }
    }
})
</script>
<style>
    .item .el-form-item__label{
        color: #ffffff;
    }
</style>
<style scoped>
    .el-form{
        width: 80%;
        margin: auto;
    }
    .login{
        width: 100%;
        height: 100%;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        background-image: url(../../assets/login.png);
        align-items: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: 66%;
    }
    .container{
        width: 350px;
        height: 245px;
        position: relative;
        box-shadow: 1px 1px 20px 0px #7aa5be;
        border-radius: 10px;
    }
    .container h1{
        font-weight: 500;
        text-align: center;
        margin: 10px 0 20px 0;
        color: #ffffff;
    }
</style>